<!-- 标签设计页面 -->
<template>
    <el-dialog
       destroy-on-close
       title="打印"
       v-model="printShow"
       ref="dialog"
       :before-close="printClose"
       width="50vw"
       top="10vw"
    >
       <div style="width: 100%;height: 100%">
          <button @click="getPrinterList">获取打印机列表</button>
          <button @click="confirmPrintPrint">打印</button>
          <!-- 这里打印内容 style 内容大小一定要小于 实际纸张大小，如果打印的纸张够大 可以忽略 -->
          <!-- 打印内容 -->
          <div id="printDivXm3" />
       </div>
    </el-dialog>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

// import { defaultElementTypeProvider } from 'vue-plugin-hiprint'
import $ from "jquery"
export default {
// 组件名称
    name: 'LabelDesignIndex',
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 父组件传递值
    props: {
        // formData: {
        //     type: Object
        // },
    },
    data() {
        return {
          hiprintTemplate: {},
          printShow:false,
          formData:{}
        }
    },
    computed: {},
    watch: {},
    created() {
    },
    mounted() {
        // this.init()
    },
    activated() {},
    // 方法集合
    methods: {
        /**
         * 弹框关闭
         * */
        printClose() {
            this.$parent.printClose();
        },
        // 初始化
        init(formData) {
            console.log('formData :>> ', formData);
            // 初始化 打印对象
            const hiprintTemplate = new this.$pluginName.PrintTemplate()
            this.hiprintTemplate = hiprintTemplate
            console.log('hiprintTemplate',hiprintTemplate)
            this.confirmPrintPrint(formData)
        },
     // 获取打印机列表
        getPrinterList() {
            if (window.hiwebSocket.opened === false) {
                this.$notify.error('打印机客户端未连接')
            }
            // 模板对象获取
            const printerList_ = this.hiprintTemplate.getPrinterList()
            console.log(printerList_)
        },

        // 使用 hiPrintPlugin 控件打印
        confirmPrintPrint(formData) {
            // 如果在 main.js 中设置了取消自动连接客户端 是获取不到打印机列表的！！！
            if (window.hiwebSocket.opened === false) {
                this.$notify.error('打印机客户端未连接，请点击右上角头像下载打印客户端')
            }
            // 重新连接客户端  当然你可以去连接局域网内的客户端
            // window.hiwebSocket.setHost("http://localhost:17521")
            // 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
            // 初始化 provider
            // this.$pluginName.init({
            //     providers: [defaultElementTypeProvider()]
            // })
            // 这一句代码 如果打印出来有问题 可以尝试加进去，没有出现 则不用加
            // this.$pluginName.PrintElementTypeManager.buildByHtml(this.$('.ep-draggable-item'))
            // 清空原内容
          console.log('this.$(\'#printDivXm3\')',$('#printDivXm3'))
            $('#printDivXm3').empty()
            const hiprintTemplate = new this.$pluginName.PrintTemplate({
                template:formData.template_json
            })
            hiprintTemplate.design('#printDivXm3')
            const printData = formData.template_data
            // 预览打印
            hiprintTemplate.print(printData)
            // 直接打印 带参数
            // hiprintTemplate.print2(printData);
            hiprintTemplate.on('printSuccess',function (data) {
                console.log(data)
            })
            hiprintTemplate.on('printError', function (data) {
                console.log(data)
            })
        }
    }
}
</script>
<style lang='scss' scoped>
/**scoped 表示样式只在当前组件有效*/
::v-deep {
    .el-dialog {
        height: 5rem;
    }
}
</style>
